<template>
  <RRDetailsModal @register="registerRRModal"/>
  <ZZDetailsModal @register="registerZZModal"/>
  <PPDetailsModal @register="registerPPModal"/>
  <CCDetailsModal @register="registerCCModal"/>
</template>

<script lang="ts" setup>
  import { watch } from 'vue';
  import RRDetailsModal from './RR';
  import ZZDetailsModal from './ZZ';
  import PPDetailsModal from './PP';
  import CCDetailsModal from './CC';

  import { useModal } from "@gui-pkg/antdcomponents";

  defineOptions({ name: 'StationPopup' });

  const [registerRRModal, { openModal: openRRModal }] = useModal();
  const [registerZZModal, { openModal: openZZModal }] = useModal();
  const [registerPPModal, { openModal: openPPModal }] = useModal();
  const [registerCCModal, { openModal: openCCModal }] = useModal();

  const props = defineProps({
    stationData: { type: Object },
  });

  watch(
    () => props.stationData,
    (val) => {
      if (val?.sttp === 'RR') {
        openRRModal(true, { record: val });
      }
      if (val?.sttp === 'ZP') {
        openZZModal(true, { record: val });
      }
      if (val?.sttp === 'PP') {
        openPPModal(true, { record: val });
      }
      if (val?.sttp === 'CC') {
        openCCModal(true, { record: val });
      }
    }
  );
</script>

<style lang="less" rel="stylesheet/less" scoped>
</style>
